<script setup>
  import { ref } from 'vue'
  import BusTicket from "@/components/scs/busTicketProcess.vue"; //引入组件
  //引入全局css
  import "@/assets/main.scss";

  const input = ref('')
  const value1 = ref('')
</script>


<template>
  <div class="bus-home">
    <div class="focus-box" style="overflow: hidden;">
      <div class="search-box bg">
        <h2>汽车票</h2>
        <div class="search"><!---->
          <dl class="label">
            <dt>出发城市</dt>
            <dd>
              <el-input v-model="input" style="width: 240px" placeholder="中文/拼音/首字母" class="txtInput" />
<!--              <input type="text" id="leaveCity" placeholder="中文/拼音/首字母" class="txtInput" cid="">-->
            </dd>
          </dl>
          <dl class="label">
            <dt>到达城市</dt>
            <dd>
              <el-input v-model="input" style="width: 240px" placeholder="中文/拼音/首字母" class="txtInput" />
<!--              <input type="text" id="arriveCity" placeholder="中文/拼音/首字母" class="txtInput" cid="1228">-->
            </dd>
          </dl>
          <dl class="label">
            <dt>出发日期</dt>
            <dd>
<!--              <input type="text" readonly="readonly" id="leaveDate" class="txtInput">-->
              <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择出发日期"
                  :default-value="new Date(2025, 2, 1)"
                  class="txtInput"
              />
              <span class="txt-day"> 星期{{ new Date(value1).getDay()==0?'日':new Date(value1).getDay()==1?'一':new Date(value1).getDay()==2?'二':new Date(value1).getDay()==3?'三':new Date(value1).getDay()==4?'四':new Date(value1).getDay()==5?'五':'六' }} </span>
            </dd>
          </dl>
          <dl class="label">
            <dt></dt>
            <dd>
              <input type="button" value="汽车票查询" class="search-btn"></dd>
          </dl>
          <div id="J-exchange" class="exchange">
            <em class="color bd">换</em>
          </div>
          <div class="history">
            <a href="//bus.ly.com/#/list?startname=上海&amp;arrivename=南通&amp;startdatetime=2025-03-04&amp;startStation=&amp;arriveStation=">上海 - 南通</a>
          </div>
        </div>
      </div>
      <div id="J-slider" class="slider">
        <ul class="inside">
          <li>
            <a href="https://bus.ly.com">
              <img src="//pic5.40017.cn/01/001/31/0d/rBANC1o49f2AYLQ_AAWWdT6xyWQ914.png">
            </a>
          </li>
        </ul>
      </div>
    </div>
    <bus-ticket>

    </bus-ticket>

    <div class="bottom">
      <ul>
        <li class="bt-one">
          <h2></h2>
          <p>
            <span>品牌保障</span>
            <span>提供正规的代购服务</span>
          </p></li> <li class="bt-two">
        <h2></h2>
        <p>
          <span>快速反馈</span>
          <span>第一时间短信通知</span>
        </p>
      </li>
        <li class="bt-three">
          <h2></h2>
          <p>
            <span>方便快捷</span>
            <span>车站直接取票上车</span>
          </p>
        </li>
        <li class="bt-four">
          <h2></h2>
          <p>
            <span>支付方便</span>
            <span>支付宝、微信、银行卡支付</span>
          </p>
        </li>
      </ul>
    </div>
  </div>

</template>



<style scoped lang="scss">
  .bus-home{
    width: 1190px;
    margin: 0 auto;
    overflow: hidden;
    .search-box{
      width: 460px;
      float: left;
      padding: 4px;
      background-size: 100% 100%;
      h2{
        height: 60px;
        line-height: 60px;
        font-size: 28px;
        color: #fff;
        text-align: center;
        letter-spacing: 5px;
        font-weight: 400;
      }
      .search{
        padding: 20px 30px;
        position: relative;
        background-color: #fff;
        .label{
          height: 34px;
          line-height: 34px;
          padding-bottom: 20px;
          position: relative;
        }
        dt{
          height: 34px;
          font-size: 16px;
          color: #666;
          width: 90px;
          float: left;
        }
        dd{
          float: left;
          position: relative;
          .txtInput{

          }
        }
        .txt-day{
          position: absolute;
          right: 0;
          top: 0;
          padding: 0 10px;
          font-size: 14px;
        }
        .search-btn{
          width: 250px;
          height: 40px;
          line-height: 40px;
          background: #ff6257;
          border: 0 none;
          color: #fff;
          font-size: 20px;
          border-radius: 3px;
          cursor: pointer;
        }
        .exchange{
          width: 30px;
          height: 54px;
          border: 1px solid #dfdfdf;
          border-left: 0 none;
          position: absolute;
          top: 37px;
          right: 40px;
          cursor: pointer;
          em{
            display: block;
            width: 24px;
            height: 24px;
            font-size: 16px;
            background: #fff;
            line-height: 24px;
            text-align: center;
            border-radius: 3px;
            margin-top: 15px;
            margin-left: 17px;
            border: 1px solid #00c777;
            color: #00c777;
            font-style: normal;
          }
        }
      }
      .history{
        padding-left: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        a{
          font-size: 14px;
          color: #999;
          margin-right: 15px;
        }
      }
    }
    .bg{
      background: #06c584;
    }
    .slider{
      float: right;
      width: 690px;
      height: 350px;
      overflow: hidden;
      position: relative;
    }
    .bottom{
      width: 1188px;
      margin: 30px auto 0;
      border: 1px solid #e7e7e7;
      overflow: hidden;
      ul{
        padding: 0 60px;
        li{
          width: 267px;
          float: left;
          .bt-one{
            background-position: 0 0;
          }
          p{
            padding-top: 18px;
            span{
              display: block;
              font-size: 14px;
              color: #999;
            }
            span:first-child{
              font-size: 20px;
              color: #333;
              margin-bottom: 5px;
            }
          }
          h2{
            width: 85px;
            height: 85px;
            background: url(https://file.40017.cn/img140017cnproduct/touch/bus/pc/index-bottom.png) no-repeat;
            float: left;
          }
        }
      }
    }

  }
</style>